<template>
  <div class="content-set-content">
    <div class="content-set-title" :style="{'text-align' : titleAlign}"><span class="content-set-title-label" :style="themeStyle">{{title}}</span></div>
    <div class="content-set-main"><slot></slot></div>
  </div>
</template>

<script>

  export default{
    name:'ContentSet',
    props: {
      title:{
        type: String,
        default: ''
      },
      titleAlign:{
        type: String,
        default: 'center'
      }
    },
    data(){
      return {
      }
    },
    computed:{
      themeStyle(){
        return {
          "color": this.$store.state.settings.theme,
         }
      },
    },
    methods:{

    }
  }
</script>

<style scoped>
  .content-set-content{
    margin: 0 5px;
    padding: 5px 5px 10px 5px;
    border: 1px solid #dfe6ec;
    border-radius: 10px;
  }
  .content-set-title{
    position: relative;
    top: -14px;
    text-align: center;
  }
  .content-set-main{
    padding: 0 10px 5px 10px;
  }
  .content-set-title-label {
    background-color: white;
    padding: 0 5px;
    color: #1890ff;
    font-weight: bold;
  }
</style>
